<script setup>
import { category } from '../api/classification';
import { ref, onMounted } from 'vue';
// import { showToast } from 'vant';

const active = ref(0);

let categoryList = ref([]);



let categoryFun = () => {
    category().then(res => {
        categoryList.value = res.data.data
        console.log("categoryList=>", categoryList.value)
        // xiaomiPhone.value = res.data.data[1].category_list
        // console.log("xiaomiPhone=",xiaomiPhone.value)
    })
}
// 小米手机
let xiaomiPhone = ref([]);
let xiaomiSeries = ref([]);

// 红米手机
let redmiPhone = ref([]);

// 手机配件
let parts = ref([]);
let partsList = ref([]);

// 电脑平板
let pad = ref([]);
let padTitleList = ref([]);
let padList = ref([]);
// 智能穿戴
let wearing = ref([])

let indexValue = ref(0);
const onChange = (index) => {
    indexValue.value = index
    if (index == 0) {//推荐
        console.log("推荐")
    } else if (index == 1) {
        xiaomiPhone.value = categoryList.value[1].category_list;
        // console.log("xiaomiPhone=",xiaomiPhone.value);
        // xiaomiSeries.value = xiaomiPhone.value[2].concat( xiaomiPhone.value[4],xiaomiPhone.value[6] )
        xiaomiSeries.value.push(xiaomiPhone.value[2], xiaomiPhone.value[4], xiaomiPhone.value[6])
        // console.log("xiaomiSeries=",xiaomiSeries.value )
    } else if (index == 2) {
        redmiPhone.value = categoryList.value[2]
    } else if (index == 3) {
        parts.value = categoryList.value[3].category_list;
        console.log("parts=", parts.value);
        partsList.value.push(categoryList.value[3].category_list[1], categoryList.value[3].category_list[3], categoryList.value[3].category_list[5])
        console.log("partsList=", partsList.value)

    } else if (index == 4) {
        pad.value = categoryList.value[4].category_list;
        console.log("pad=", pad.value);
        padTitleList.value = categoryList.value[4].title_list;
        padList.value.push(categoryList.value[4].category_list[2], categoryList.value[4].category_list[4], categoryList.value[4].category_list[6], categoryList.value[4].category_list[8])
        console.log("padList=", padList.value)
    }else if (index == 5 ){
        wearing.value = categoryList.value[5].category_list
        console.log("wearing=",wearing.value)
    }
}

const scrollTop = () => {
    let scroll = document.querySelector('#side').scrollTop;
    console.log(scroll)
    if( scroll<= 66 ){
        titleValue.value = '笔记本'
    }else if ( scroll<=357 ){
        titleValue.value = '平板'
    }else if ( scroll<= 735 ){
        titleValue.value = '显示器'
    }else if( scroll<= 882 ){
        titleValue.value = '办公配件'
    }
}

// 排他事件
let titleValue = ref('笔记本')
let select = (title) => {
    titleValue.value = title
    if(title == '笔记本'){
        console.log(title)
        document.querySelector('#side').scrollTop = 66
    }else if( title == '平板' ){
        console.log(title)
        document.querySelector('#side').scrollTop = 357
    }else if( title == '显示器' ){
        console.log(title)
        document.querySelector('#side').scrollTop = 735
    }else if( title == '办公配件' ){
        console.log(title)
        document.querySelector('#side').scrollTop = 882
    }
}

onMounted(() => {
    categoryFun();
    window.addEventListener('scroll',scrollTop,true)
})


</script>
<template>
    <div class="classify-page">
        <div class="search">
            <span class="iconfont icon-sousuo"></span>
            <input type="text" name="" id="" placeholder="请搜索商品名称">
        </div>

        <div class="side-Bar">
            <van-sidebar v-model="active" @change="onChange">
                <van-sidebar-item :title="item.category_name" v-for="(item, index) in categoryList" :key="index" />
            </van-sidebar>
        </div>

        <div class="side-content" id="side">

            <div class="recommendation" v-show="indexValue == 0">
                推荐
            </div>
            <div class="xiaomi-phone" v-show="indexValue == 1">
                <div class="xiaomi-top" v-if="xiaomiPhone[0]">
                    <img :src="xiaomiPhone[0].body.items[0].img_url" alt="">
                </div>
                <div class="xiaomi-item" v-for="(item, index) in xiaomiSeries" :key="index">
                    <p class="title">{{ item.body.title }}</p>
                    <div class="series-item" v-for="(itm, ind) in item.body.product_list" :key="ind">
                        <img :src="itm.puzzle_url" alt="">
                        <div class="series-item-right">
                            <p class="item-name">{{ itm.name }}</p>
                            <p class="price">￥{{ itm.price }}起 <span class="label" v-if="itm.labels">{{ itm.labels[0]
                            }}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="redmi-phone" v-show="indexValue == 2">
                redmi
            </div>
            <!-- 手机配件 -->
            <div class="parts" v-show="indexValue == 3">
                <div class="parts-item" v-for="(item, index) in partsList" :key="index">
                    <p class="parts-name">{{ item.body.title }}</p>

                    <div class="parts-product" v-for="(itm, ind) in item.body.items" :key="ind">
                        <img :src="'https:' + itm.img_url" alt="" srcset="">
                        <p class="product_name">{{ itm.product_name }}</p>
                    </div>

                </div>
            </div>
            <!-- 电脑平板 -->
            <div class="pad" v-show="indexValue == 4">
                <div class="pad-top-img" v-if="pad[0]">
                    <img :src="pad[0].body.items[0].img_url" alt="">
                </div>
                <div class="pad-title-list">
                    <span :class="titleValue ==item.title? 'active':''" v-for="(item, index) in padTitleList" :key="index" @click="select(item.title)">{{ item.title }}</span>
                </div>
                <div class="product-item" v-for="(item, index) in padList" :key="index">
                    <p class="title">{{ item.body.title }}</p>
                    <div class="product" v-for="(it, id) in item.body.items" :key="id">
                        <img :src="'https:' + it.img_url" alt="">
                        <p class="product-name">{{ it.product_name }}</p>
                    </div>
                    <div class="product"></div>
                    <div class="product"></div>
                </div>
            </div>
            <!-- 智能穿戴 -->
            <div class="wearing" v-show="indexValue == 5">
                <div class="pad-top-img" v-if="wearing[0]">
                    <img :src="wearing[0].body.items[0].img_url" alt="">
                </div>
                <div class="pad-title-list">
                    <span :class="titleValue ==item.title? 'active':''" v-for="(item, index) in padTitleList" :key="index" @click="select(item.title)">{{ item.title }}</span>
                </div>
                <div class="product-item" v-for="(item, index) in padList" :key="index">
                    <p class="title">{{ item.body.title }}</p>
                    <div class="product" v-for="(it, id) in item.body.items" :key="id">
                        <img :src="'https:' + it.img_url" alt="">
                        <p class="product-name">{{ it.product_name }}</p>
                    </div>
                    <div class="product"></div>
                    <div class="product"></div>
                </div>
            </div>
            <div class="tv" v-show="indexValue == 6">
                电视
            </div>
            <div class="big" v-show="indexValue == 7">
                大家电
            </div>
            <div class="small" v-show="indexValue == 8">
                小家电
            </div>
            <div class="furnishings" v-show="indexValue == 9">
                智能家居
            </div>
            <div class="motion" v-show="indexValue == 10">
                出行运动
            </div>
            <div class="use-phone" v-show="indexValue == 11">
                日用百货
            </div>
            <div class="child" v-show="indexValue == 12">
                儿童用品
            </div>
            <div class="selected" v-show="indexValue == 13">
                有品精选
            </div>
            <div class="xiaomi-service" v-show="indexValue == 14">
                小米服务
            </div>

            <div class="empty-div" style="height: 100px; width: 100%;background-color: #f5f5f5;"></div>

        </div>

    </div>
</template>
<style lang="scss">
.classify-page {

    .search {
        width: 100%;
        height: 50px;
        background-color: #fff;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        position: sticky;
        top: 0px;
        z-index: 999;

        input {
            width: 90%;
            height: 32px;
            border-radius: 20px;
            outline: none;
            border: none;
            text-indent: 40px;
            background-color: #f7f7f7;
        }

        .icon-sousuo {
            position: absolute;
            left: 30px;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .side-Bar {
        .van-sidebar {
            width: 95px;
            text-align: center;
        }

        .van-sidebar-item {
            padding: 13px 10px;
            background-color: #fff;
        }

        .van-sidebar-item--select:before {
            background-color: #ff5934;
        }
    }

    .side-content {
        width: 75%;
        height: 100vh;
        position: fixed;
        top: 50px;
        right: 0px;
        overflow-y: scroll;
        background-color: #fff;

        .xiaomi-phone {
            .xiaomi-top {
                width: 94%;
                height: 77px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .xiaomi-item {
                margin-bottom: 35px;

                .title {
                    font-size: 15px;
                    font-weight: 750;
                }

                .series-item {
                    width: 90%;
                    height: 78px;
                    background-color: #f8f8f8;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 8px;
                    margin-top: 5px;

                    img {
                        width: 70px;
                        height: 70px;
                        margin-right: 5px;
                        margin-left: 5px;
                    }

                    .series-item-right {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;

                        .item-name {
                            font-size: 15px;
                        }

                        .price {
                            font-size: 15px;
                            margin-top: 8px;

                            .label {
                                display: inline-block;
                                font-size: 12px;
                                color: #c69768;
                                border-radius: 3px;
                                border: 1px solid #c69768;
                                padding: 0px 5px;
                            }
                        }

                    }
                }
            }
        }

        .parts {
            width: 100%;

            .parts-item {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: 68px;

                .parts-name {
                    width: 100%;
                    font-size: 13px;
                    font-weight: 700;
                }

                .parts-product {
                    width: 30%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-top: 15px;

                    img {
                        width: 100%;
                        height: auto;
                    }

                    .product_name {
                        font-size: 12px;
                        color: #757575;
                    }
                }

            }
        }

        .pad {
            width: 95%;

            .pad-top-img {
                width: 100%;
                height: 77px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .pad-title-list {
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #ebebeb;
                padding: 10px 0px;
                margin-bottom: 15px;
                position: sticky;
                top: 0px;
                background-color: #fff;

                span {
                    font-size: 12px;
                    display: inline-block;
                    padding: 5px 7px;
                }
                .active{
                    background-color: #efefef;
                    border-radius: 3px;
                }
            }

            .product-item {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
                margin-bottom: 70px;

                .title {
                    width: 100%;
                    font-size: 13px;
                    font-weight: 700;
                }

                .product {
                    width: 30%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    img {
                        width: 100%;
                        height: auto;
                    }

                    .product-name {
                        font-size: 12px;
                        color: #757575;
                        display: -webkit-box;
                        /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
                        -webkit-box-orient: vertical;
                        /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
                        text-overflow: ellipsis;
                        /* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }
                }
            }
        }


    }
}</style>